<template>
  <div v-if="true" id="dialog" class="">
    <!-- 运势标题 -->
    <h1 :style="titleStyle">{{ title }}</h1>
    <div id="text">
      <!-- 运势解释 -->
      <span :style="textStyle" class="horizontal-left">
        {{ text }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    title: String,
    level: Number,
    text: String,
  },
  components: {},
  data: function() {
    return {
      // 运势标题样式
      titleStyle: {
        color: '',
      },
      // 主文字区域样式
      textStyle: {
        color: '',
      },
    }
  },
  // 观察者
  watch: {
    // 如果 `level` 发生改变，这个函数就会运行
    level: function(newLevel) {
      this.titleStyleUpdate(newLevel)
    },
  },
  // 构建者
  created: function() {
    setTimeout(
      function() {
        this.init()
      }.bind(this),
      10
    )
  },

  methods: {
    /**
     * Async Init
     * 数据初始化
     *
     * @return void
     */
    async init() {
      this.titleStyleBuild()
    },

    /**
     * TitleStyleBuild
     * 构建标题样式
     *
     * @return void
     */
    titleStyleBuild() {
      // 用oldLevel初始化样式
      this.titleStyleUpdate(this.level)
    },

    /**
     * TitleStyleUpdate
     * 标题样式更新(被观察者level)
     *
     * @return void
     */
    titleStyleUpdate(level) {
      // 根据运势等级给出不同的颜色提醒用户
      this.titleStyle.opacity = 1
      if (level > 7) {
        this.titleStyle.color = 'dodgerblue'
        return
      }
      if (level > 5) {
        this.titleStyle.color = 'green'
        return
      }
      if (level > 3) {
        this.titleStyle.color = 'orange'
        return
      }
      this.titleStyle.color = 'red'
      return
    },
  },
}
</script>

<style scoped media="screen" lang="less">
#dialog {
  width: 70%;
  border-radius: 1rem;
  background-color: #0c0c0c;
  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem #1c1c1c;
  opacity: 0.9;
  /* 区域内可以滚动 */
  overflow-y: auto;

  #text {
    /* background-color: red; */
    padding: 0 10% 0 10%;
  }
  span {
    /* 允许换行 */
    word-wrap: break-word;
    word-break: normal;
    /* 首行缩进 */
    text-indent: 2rem;
    font-size: 1rem;
    color: antiquewhite;
  }
}

// 容器属性
/* 左对齐 */
.horizontal-left {
  display: block;
  text-align: left;
}
</style>
